<template>
<!-- 这个组件他需要自己发送请求获取数据，同时还要把自己的数据传递给
调用自己的父组件，在父组件看来，他就是一个数据的提供者 -->
<!-- 第一个问题 -->
<!-- 这里面有两个需要绑定的东西，第一个就是获取的内容，循环之后
会出现在下拉列表中，需要把他们中选中的渲染在自己的上级显示框中 -->
<!-- 第二个问题 -->
<!-- 还有一个绑定就是这个拿到的值，需要返还给父组件，绑定到父组件
中需要的位置 -->
  <el-form-item label="频道5"  prop="channelId">
<!-- <div>{{value}}</div> -->
        <!-- el-select上的value用来指定当前下拉列表中哪一项处于选中状态
    change：当用户切换了选中项之后，发生。它会自动传入当前选项对应的value -->
    <!-- 这里解决第一个问题，就是输入框的显示问题，它显示什么，由value属性决定
    这个value用来指定当前下拉列表中的那一项处于选中状态
    可以给它动态绑定一个value值，绑定到form中的value上,问题是这里没有value
    那这个value是哪来的?它其实是父组件传递过来的value,即props中的value
    这里你选中了它的id,你就默认选中了这个子选项,这个自选向就会显示-->
    <el-select  placeholder="请选择频道"
    @change="hChange"
    :value="value">
    <!-- :key="channel.id" 是在这里使用v-for的代价,必须写
     :label="channel.name" 决定了输入框显示的是哪一个
     :value="channel.id"  决定了获取的id值也是change事件接收的默认参数
     当你选中这一项之后,el-select中的value对应的值就是这个值其实是id值-->
      <el-option
        v-for="channel in channels"
        :key="channel.id"
        :label="channel.name"
        :value="channel.id">
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script>
export default {
  name: 'channel',
  // 因为是接收父组件传入的值,需要使用value和input这两个固定的格式
  // 他们具体代表的是什么内容,可以先不追究
  // <my-channel v-model="form.channelId"></my-channel>
  // 因为父组件在引用子组件时有这么一个玩意,所以子组件必须有所表示
  // 需要声明一下关系,认爹, 这个props 就是一个声明,这时候你直接在子组件
  // 里面使用{{ value }} 这个插值表达式,也可以得到值
  // 这个value就是父组件中的 form.channelId 即 value = form.channelId
  // 现在父亲已经把值传给儿子了,什么时候儿子能把值传回给父亲呢? 需要一个机会
  // 这个机会就是下拉框选中的时刻,即下拉框的change事件触发的时候
  props: ['value'],
  data () {
    return {
      channels: []
    }
  },
  created () {
    this.loadChannel()
  },
  methods: {
    // change事件是这个下拉菜单组件特有的属性,一改变值就会触发,所以绑定它,名字hChange是随便起的
    // emit后面只能写input事件,不能写别的,这个Val是element-ui自动给绑定的传回的值,通过这个val()id值
    // 把这个值传递给它激活的事件,就是父组件中的那个v-model="form.channelId"所影响的form.channelId
    // 直接把自己的值val传递给了form.channelId,也是实现了传值,这个值,就是借口文档需要的值
    hChange (val) { // val是固定传回来的值 即目前的选中值 :value="channel.id" 通过这个代码,解决了第二个问题
      this.$emit('input', val)
      // 这个值就是选中项的id值
      console.log(val)
    },
    async loadChannel () {
      const res = await this.$axios({
        method: 'GET',
        url: '/mp/v1_0/channels'
      })
      // console.log(res)
      this.channels = res.data.data.channels
    }
  }
}
</script>

<style>

</style>
